<template>
    <div class="mv-container">
       <div class="mv-left">
          <h3>mv详情</h3>
          <div class="video_box">
             <!--mv播放区域-->
             <video controls :src="url.url" autoplay></video>
          </div>
          <div class="info_box">
             <div class="singer">
                <img :src="iocn" alt="">
                <span>{{mvNews.artistName}}</span>
             </div>
             <div class="txt">
              <h2>{{mvNews.name}}</h2>
              <span>发布：{{mvNews.publishTime}}</span>
              <span>播放：{{mvNews.playCount}}次</span>
              <p>{{mvNews.desc}}</p>
             </div>
          </div>
          <!--评论区域-->
           <!--最热评论-->
          <div class="comment_box" v-if="hotTotal !=0">
              <p>最新评论({{hotTotal}})</p>
              <div class="comment_wrap">
                 <div class="item" v-for="(item,index) in hotComment" :key="index">
                    <div class="item_img">
                       <img :src="item.user.avatarUrl" alt="">
                    </div>
                    <div class="item_txt">
                        <div class="txt_1">
                            <span class="name">{{item.user.nickname}} : </span>
                            <span>{{item.content}}</span>
                        </div>
                        <div class="txt_2" v-if="item.beReplied.length != 0">
                            <span class="name">{{item.beReplied[0].user.nickname}}:</span>
                            <span>{{item.beReplied[0].content}}</span>                         
                        </div>
                        <div class="txt_3">2020-05-11 12:21:34</div>
                    </div>
                 </div>                 
              </div>
          </div>           
          <!--最新评论-->
          <div class="comment_box" v-if="total !=0">
              <p>最新评论({{total}})</p>
              <div class="comment_wrap">
                 <div class="item" v-for="(item,index) in newComment" :key="index">
                    <div class="item_img">
                       <img :src="item.user.avatarUrl" alt="">
                    </div>
                    <div class="item_txt">
                        <div class="txt_1">
                            <span class="name">{{item.user.nickname}} : </span>
                            <span>{{item.content}}</span>
                        </div>
                        <div class="txt_2" v-if="item.beReplied.length != 0">
                            <span class="name">{{item.beReplied[0].user.nickname}}:</span>
                            <span>{{item.beReplied[0].content}}</span>                         
                        </div>
                        <div class="txt_3">2020-05-11 12:21:34</div>
                    </div>
                 </div>                 
              </div>
          </div>
            <!-- 分页器 --> 
            <el-pagination
            @current-change="handleCurrentChange"
            background
            :current-page="page"
            :page-size="limit"
            layout="prev, pager, next"
            :total="total">
            </el-pagination>           
          </div>
       <div class="mv-right">
           <h3>相关推荐</h3>
           <div class="list">
              <div class="items">
                 <div class="item" v-for="item in mvId" :key="item.id" @click="palyMv(item.id)">
                    <div class="item_img">
                        <div class="num_box el-icon-caret-right"><span>{{item.playCount}}</span></div>
                        <img :src="item.cover" alt="">
                        <p class="el-icon-caret-right"></p>
                    </div>
                    <div class="item_info">
                       <div class="name">{{item.name}}</div>
                       <div class="singer">{{item.artistName}}</div>
                    </div>
                 </div>                
              </div>
           </div>
       </div>       
    </div>
</template>

<script>
export default {
    data () {
        return {
           //mv数据
            url:'',
           //相关推荐数据
           mvId:[],
           //MV信息数据
           mvNews:{},
           //歌手头像
           iocn:'',
           //最新评论数据
           newComment:[],
           //最热评论
           hotComment:[],
           //最热评论条数
           hotTotal:0,
           //默认请求条数
           limit:5,
           //默认页码
           page:1,
           //总条数
           total:0
        }
    },
    created () {
        this.getUrl()
        this.getMvId()
        this.getMvNews()
        this.getNewComment()
        this.getHotComment()
    },
    methods:{
      async getUrl() {
           const res = await this.$http.get('https://autumnfish.cn/mv/url',{params:{id:this.$route.query.id}})
            if(res.data.code == 200){
               this.url = res.data.data
            }
       },
      async getMvId () {
           const res = await this.$http.get('https://autumnfish.cn/simi/mv',{params:{mvid:this.$route.query.id}})
             if(res.data.code == 200){
                 this.mvId = res.data.mvs
             }
       },
      async palyMv (id) {
           const res = await this.$http.get('https://autumnfish.cn/mv/url',{params:{id}})
              if(res.data.code == 200){
                 this.url = res.data.data
              }
       },
      async getMvNews () {
           const res = await this.$http.get('https://autumnfish.cn/mv/detail',{params:{mvid:this.$route.query.id}})
             if(res.data.code == 200){
                 this.mvNews = res.data.data;
                  const res2 = await this.$http.get('https://autumnfish.cn/artists',{params:{id:this.mvNews.artists[0].id}})
                   this.iocn = res2.data.artist.picUrl
             }
       },
        async getNewComment () {
           const res = await this.$http.get('https://autumnfish.cn/comment/mv',{
               params:{
                       id:this.$route.query.id,
                       limit:this.limit,
                       offset:(this.page-1)*this.limit
                   }})
                   if(res.data.code == 200){
                       this.newComment = res.data.comments
                       this.total = res.data.total
                   }

       },
       async getHotComment () {
              const res = await this.$http.get('https://autumnfish.cn/comment/hot',{
                  params:{
                       id:this.$route.query.id,
                       type:1
                  }})
                    if(res.data.code == 200){
                       this.hotComment = res.data.hotComments
                       this.hotTotal = res.data.total
                   }
                console.log(res)
        },
       handleCurrentChange (newPage) {
           this.page = newPage
           this.getNewComment()
       }
    }
}
</script>

<style lang="less" scoped>
   .mv-container{
       display: flex;
       .mv-left{
           width: 700px;
           margin-right: 30px;
           h3{}
           .video_box{
               width: 100%;
               height: 390px;
               margin-top: 20px;
               video{
                   width: 100%;
                   height: 100%;
                   border-radius: 10px;
               }
           }
           .info_box{
               margin-top: 20px;
               .singer{
                   display: flex;
                   align-items: center;
                   margin-bottom: 30px;
                   img{
                       width: 70px;
                       height: 70px;
                       border-radius: 50%;
                       margin-right: 15px;
                   }
                   span{}
               }
               .txt{
                   h2{
                       margin-bottom: 20px;
                   }
                   span{
                       font-size: 14px;
                       color: grey;
                   }
                   p{
                        font-size: 15px;
                       margin-top: 20px;
                   }
               }
           }
          .comment_box{
              margin-top: 60px;
              p{
                  font-size: 25px;
                  margin-bottom: 30px;
              }
              .comment_wrap{
                  .item{
                      display: flex;
                      margin-top: 40px;
                      .item_img{
                          margin-right: 15px;
                          img{
                              width: 50px;
                              height: 50px;
                              border-radius: 50%;
                          }
                      }
                      .item_txt{
                          width: 100%;
                          .txt_1{
                              .name{
                                  color: #517eaf;
                                  font-size: 14px;
                              }
                              span{
                                  font-size: 14px;
                              }
                          }
                          .txt_2{
                              width: 100%;
                              margin: 10px 0;
                              background: #e6e5e6;
                              padding: 10px;
                              .name{
                                  color: #517eaf;
                                  font-size: 14px;
                              }
                              span{
                                  font-size: 14px;
                              }                           
                          }
                          .txt_3{
                              font-size: 12px;
                              color: grey;
                          }
                      }
                  }
              }
          } 
       }
       .mv-right{
           h3{}
           .list{
               margin-top: 30px;
              .items{
                 .item{
                     display: flex;
                     align-items: center;
                     margin-top: 10px;
                     padding: 10px;
                      cursor: pointer;
                    .item_img{
                        width: 180px;
                        margin-right: 10px;
                        position: relative;
                        .num_box{
                           position: absolute;
                           right: 5px;
                           top: 3px;
                           color: white;
                           font-size: 20px;
                           display: flex;
                           align-items: center;
                           span{
                               font-size: 14px;
                           }
                        }
                        img{
                            width: 180px;
                            border-radius: 5px;
                        }
                        p{
                            position: absolute;
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            left: 50%;
                            top: 50%;
                            margin-left: -20px;
                            margin-top: -20px;
                            background: white;
                            color: #dd6d60;
                            font-size: 35px;
                            line-height: 40px;
                            text-align: center;
                            cursor: pointer;
                            opacity: 0;
                        }
                    }
                    .item_img:hover p{
                          opacity: 1;
                    }
                   .item_info{
                       .name{
                           font-size: 15px;
                       }
                       .singer{
                           font-size: 13px;
                           color: grey;
                       }
                   } 
                 } 
                 .item:hover{
                    background: whitesmoke;
                 }
              } 
           }
       }
   }
</style>